<template>
  <CommonCard title="今日交易用户数" :value="numberFormat(orderUser)">
    <div ref="barChartRef" style="width:100%;height: 100%;"></div>
    <template #footer>
      <!-- <div>退货率 &nbsp;<span class="emphasis"> 5.91%</span></div> -->
      <span>退货率</span>&nbsp;
      <span class="emphasis">{{returnRate}}%</span>
    </template>
  </CommonCard>
</template>

<script lang="ts">
export default {
  name:'TodayUsers'
}
</script>
<script lang="ts" setup>
import {ref,onMounted,computed,watch} from 'vue'
import CommonCard from './CommonCard.vue'
import * as echarts from 'echarts';
import type { EChartsType } from 'echarts';
import { useReportDataStore } from '@/stores/reportData'
import useFormat from '@/hooks/useFormat'
const {numberFormat, moneyFormat} = useFormat()
const reportInfoStore = useReportDataStore()
const barChartRef = ref();

let barChart: EChartsType;

// 1. 使用计算属性来精简一下需要用到的store中的数据
// 今日交易用户数
const orderUser = computed(() => reportInfoStore.reportInfo.orderUser)
// 退货率
const returnRate = computed(() => reportInfoStore.reportInfo.returnRate)
// 相当于是柱状图Y轴需要用到的数据
const orderUserTrend = computed(() => reportInfoStore.reportInfo.orderUserTrend)
// 相当于是柱状图X轴需要用到的数据
const orderUserTrendAxis = computed(()=>reportInfoStore.reportInfo.orderUserTrendAxis)

const getOption = () => {
  return {
    xAxis: {
      // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] 
      data: orderUserTrendAxis.value
    },
    yAxis: {
      show:false // 不显示Y轴刻度线
    },
    series: {
      type: 'bar',
      // data: [44, 126, 55, 88, 133, 99, 33, 113, 63, 98, 77, 123],
      data:orderUserTrend.value
    },
    grid: {
      left: 0,
      right:0
    },
    tooltip: {}
  }
}

// 1. 组件挂载完毕后 生成图形
onMounted(() => {
  barChart = echarts.init(barChartRef.value)
  window.addEventListener('resize', () => {
    // 当页面尺寸发生变化的时候,要重新根据参数来生成
    barChart.resize()
  })
})

// 使用监听属性来监听数据是否映射过来
watch(orderUser, () => {
  barChart.setOption(getOption())
})
</script>

<style>

</style>